<template>
  <view class="goods-item">
    <view class="goods-top" v-if="!!goodsInfo.top  && goodsShowFieldObj.top">
      <view class="goods-top-img">
        <image class="img" src="@/static/goods/top1.png"  v-if="goodsInfo.top == 1"></image>
        <image class="img" src="@/static/goods/top2.png"  v-if="goodsInfo.top == 2"></image>
        <image class="img" src="@/static/goods/top3.png"  v-if="goodsInfo.top == 3"></image>
      </view>
    </view>
    <view class="goods-head" @click="goTo(goodsInfo.prodShortName)">
      <view class="goods-img-container">
        <image class="goods-img" :src="goodsInfo.prodPicUrl"></image>
        <view class="goods-exception-show" v-if="goodsInfo.prodStatus != '1' || !goodsInfo.showPrice">
          <image class="exception-img" src="https://oss.suning.com/srcfews/panasonic-mp/static/goods/goods-empty.png" v-if="goodsInfo.prodStatus == '2'"></image>
          <image class="exception-img" src="https://oss.suning.com/srcfews/panasonic-mp/static/goods/not-sale.png" v-else-if="goodsInfo.prodStatus != '1'"></image>
        </view>
      </view>
    </view>
    <view class="goods-content">
      <view class="goods-title" v-if="goodsShowFieldObj.name">
        {{goodsInfo.prodTitle}}
      </view>
      <TagShow :tagList="goodsInfo.tagList" v-if="goodsShowFieldObj.tag"></TagShow>
      <view class="add-cart-row">
        <PriceShow :price="goodsInfo.showPrice" v-if="goodsShowFieldObj.price"></PriceShow>
        <view class="sales-add-cart-column">
          <view class="sales-volume-show common-price-font" v-if="goodsShowFieldObj.sales">
            大区销量：{{goodsInfo.saleCount || 0}}
          </view>
          <view class="add-cart-btn" @click="addCart(goodsInfo)" v-if="goodsInfo.prodStatus == '1' && !!goodsInfo.showPrice">
            <image class="img" src="https://oss.suning.com/srcfews/panasonic-mp/static/marketing/addCart.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import PriceShow from '@/components/PriceShow/index.vue'
import TagShow from '@/components/TagShow/index.vue'

const addCart = (goodsInfo:GoodsItem)=>{
  console.info('加购:',goodsInfo.prodShortName)
  const skuCode = goodsInfo.prodShortName || '';

}

type TagInfo = {
  tagName: string,
  tagType: string,
  sortValue: number
}
type GoodsItem = {
  prodShortName: string;
  prodPicUrl: string;
  prodTitle: string;
  showPrice: string;
  tagList: TagInfo[];
  prodStatus:string;
  saleCount:number;
  top:number;
}

import {ref} from 'vue'
const props = defineProps({
  goodsInfo: {
    type: Object as ()=> GoodsItem,
    default: ()=>{}
  },
  showContent: {
    type: Array as () => number[],
    default: () => []
  },//showContent, //1-商品名称，2-商品标签，3-商品价格，4-销量排名，5-商品销量
  columns:{
    type: Number,
    default: 2
  }
});
const ShowNameMapping = {
  1: 'name',//1-商品名称
  2: 'tag',//2-商品标签
  3: 'price',//3-商品价格
  4: 'top',//4-销量排名
  5: 'sales',//5-商品销量
}
const obj = {
  name: false,//1-商品名称
  tag: false,//2-商品标签
  price: false,//3-商品价格
  top: false,//4-销量排名
  sales: false,//5-商品销量
}
props.showContent.forEach(show => {
  if(!!ShowNameMapping[show]){
    obj[ShowNameMapping[show]] = true;
  }
})
const goodsShowFieldObj  = ref(obj)

const goTo = (prodShortName:string)=>{
  uni.navigateTo({
    url:'/pages/sell-goods/goods/index?skuCode=' + prodShortName,
  })
}

const columnsStyleConfig = {
  1:{
    width: '686rpx',
    padding: '24rpx',
    imgSize: '160rpx',
    bodyWidth:'462rpx',
    flexDirection: 'row',
  },
  2:{
    width: '336rpx',
    padding: '16rpx',
    imgSize: '304rpx',
    bodyWidth:'304rpx',
    flexDirection: 'column',
  },
  3:{
    width: '224rpx',
    padding: '16rpx',
    imgSize: '192rpx',
    bodyWidth:'192rpx',
    flexDirection: 'column',
  }
}
const goodsCardStyle = columnsStyleConfig[props.columns]


console.log('goodsInfo', props.goodsInfo)
</script>
<style lang="scss" scoped>
.goods-item{
  width: v-bind('goodsCardStyle.width');
  padding: v-bind('goodsCardStyle.padding');
  box-sizing: border-box;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: v-bind('goodsCardStyle.flexDirection');
  gap: 16rpx;

  .goods-top{
    position: absolute;
    z-index: 19;
    width: 56rpx;
    height: 72rpx;
    .goods-top-img{
      .img{
        width: 56rpx;
        height: 72rpx;
      }
    }
  }

  .goods-head{
    .goods-img-container{
      width: v-bind('goodsCardStyle.imgSize');
      height: v-bind('goodsCardStyle.imgSize');
      display: flex;
      .goods-img{
        width: v-bind('goodsCardStyle.imgSize');
        height: v-bind('goodsCardStyle.imgSize');
      }
      .goods-exception-show{
        width: inherit;
        height: inherit;
        background-color: grey;
        box-sizing: border-box;
        position: absolute;
        z-index: 9;
        opacity: 0.7;
        display: flex;
        .exception-img {
          width: 128rpx;
          height: 128rpx;
          margin: auto;
        }
      }
    }
  }

  .goods-content{
    box-sizing: border-box;
    width: v-bind('goodsCardStyle.bodyWidth');
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    .goods-title{
      height: 80rpx;

      font-size: 28rpx;
      color: #323233;
      font-weight: 600;
      line-height: 40rpx;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .add-cart-row{
      height: 42rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .sales-add-cart-column{
        height: 42rpx;
        display: flex;
        .sales-volume-show{
          font-size: 24rpx;
          color: #969799;
          letter-spacing: -0px;
          line-height: 34rpx;
          font-weight: 400;
        }
        .add-cart-btn{
          margin-left: 16rpx;
          width: 42rpx;
          height: 42rpx;
          .img{
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}
</style>